<template>
    <div class="content">
        <div class="top-title" v-if="data.name">
            <div class="title-box banner-box">
                <div class="title">{{ data.name }}</div>
                <div class="time">发布时间：{{ data.create_date }}</div>
            </div>
        </div>
        <div class="content-box">
            <div class="banner-box" v-html="data.webText"></div>
        </div>
        <div class="img-box">
            <div class="banner-box">
                <img v-if="data.img" :src="base64Img(data.img)" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import { getNewsContent } from '@/api/viewapi.js'
import router from '@/router/index.js'
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router';
import { base64Img } from '@/tools/tools.js'
const route = useRoute();
const viewData = reactive({
    checkid: 0,
    newsid: 0
})
const data = ref({})


const _getNewsContent = (id, newsid) => {
    getNewsContent(newsid, id).then((res) => {
        console.log(res);
        data.value = res.data.value
    })
}

onMounted(() => {
    viewData.checkid = route.query.checkid
    viewData.newsid = route.query.newsid
    _getNewsContent(route.query.checkid, route.query.newsid)
});
</script>

<style lang="scss" scoped>
/* pc */
@media (min-width: 800px) {
    .content {
        background-color: rgb(248, 248, 248);

        .top-title {
            padding: 20px 0;

            .title-box {
                .title {
                    font-size: 36px;
                }

                .time {
                    font-weight: 200;

                }
            }
        }

        .content-box {
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: white;
            min-height: 200px;
        }

        .img-box {
            margin-bottom: 20px;
            background-color: white;

            .banner-box {
                display: flex;
                justify-content: center;

                img {
                    max-width: 800px;
                }
            }
        }
    }

}

/* phone */
@media screen and (max-width: 799px) {
    .content {
        background-color: rgb(248, 248, 248);
        padding: 10px;

        .top-title {
            padding: 20px 0;

            .title-box {
                .title {
                    font-size: 36px;
                }

                .time {
                    font-weight: 200;

                }
            }
        }

        .content-box {
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: white;
            min-height: 200px;
        }

        .img-box {
            margin-bottom: 20px;
            background-color: white;

            .banner-box {
                display: flex;
                justify-content: center;

                img {
                    width: 100%;
                }
            }
        }
    }

}
</style>